<template>
    <div class="study-record-form">
      <el-form :model="form" label-width="120px">
        <el-form-item label="日期">
          <el-date-picker v-model="form.date" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="科目">
          <el-input v-model="form.subject"></el-input>
        </el-form-item>
        <el-form-item label="学习时长">
          <el-input v-model="form.hours"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.notes" type="textarea"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">提交</el-button>
          <el-button @click="handleCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        form: {
          date: '',
          subject: '',
          hours: '',
          notes: ''
        }
      };
    },
    methods: {
      handleSubmit() {
        this.$emit('submit', this.form);
        this.handleReset();
      },
      handleReset() {
        this.form = {
          date: '',
          subject: '',
          hours: '',
          notes: ''
        };
      },
      handleCancel() {
        this.$router.push('/');
      }
    }
  };
  </script>
  
  <style scoped>
  .study-record-form {
    padding: 20px;
    height: auto;
    width: 1300px;
    background-color: rgba(128, 199, 175, 0.115)  ;
    margin-left: 180px;
  }
  </style>
  